﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        .sharp
        {
            width: 30%;
            margin: 20px auto 0;
            float: left;
            margin-right: 2%;
        }
        .sharp .content div
        {
            padding: 10px;
            text-indent: 2em;
        }
        .content
        {
            height: 180px;
        }
        h3
        {
            height: 29px;
            line-height: 29px;
            font-size: 12px;
            text-indent: 10px;
        }
        a:link, a:visited
        {
            color: #999;
            font-weight: bold;
            text-decoration: none;
        }
        a:hover
        {
            text-decoration: none;
            border-bottom: 1px orange solid;
            color: orange;
        }
        /*上圆角框通用设置样式，如果要运用多个不同颜色，以下6句不用重新变化--------------------------------*/
        .b1, .b2, .b3, .b4, .b5, .b6, .b7, .b8
        {
            height: 1px;
            font-size: 1px;
            overflow: hidden;
            display: block;
        }
        .b1, .b8
        {
            margin: 0 5px;
        }
        .b2, .b7
        {
            margin: 0 3px;
            border-right: 2px solid;
            border-left: 2px solid;
        }
        .b3, .b6
        {
            margin: 0 2px;
            border-right: 1px solid;
            border-left: 1px solid;
        }
        .b4, .b5
        {
            margin: 0 1px;
            border-right: 1px solid;
            border-left: 1px solid;
            height: 2px;
        }
        .content
        {
            border-right: 1px solid;
            border-left: 1px solid;
            overflow: hidden;
        }
        /*颜色方案一,蓝色边框----------------------------------------*/
        /*下面第一、二句决定边框颜色，第三句决定背景颜色*/
        /*边框色*/
        .color1 .b2, .color1 .b3, .color1 .b4, .color1 .b5, .color1 .b6, .color1 .b7, .color1 .content
        {
            border-color: #96C2F1;
        }
        .color1 .b1, .color1 .b8
        {
            background: #96C2F1;
        }
        /*背景色*/
        .color1 .b2, .color1 .b3, .color1 .b4, .color1 .b5, .color1 .b6, .color1 .b7, .color1 .content
        {
            background: #EFF7FF;
        }
    </style>
</head>
<body>
    <div class="sharp color1">
        <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
        <div class="content">
            <h3>
                纯css圆角框换肤方案一</h3>
            <div>
                这是最基本的圆角框，无图片，四个圆角全部采用标签绘制，兼容所有浏览器，无HACK，使用时只需添加一个class = " color1 "即可，下面的所有颜色方案你可以灵活自定义。
                <br />
                <br />
                <br />
                <br />
                <br />
                <p style="text-align: right;">
                    <a href="http://binyong.cnblogs.com" title="更多内容请访问冰极峰博客">冰极峰博客</a></p>
            </div>
        </div>
        <b class="b5"></b><b class="b6"></b><b class="b7"></b><b class="b8"></b>
    </div>
</body>
</html>
